{% extends 'base.html' %}
{% load static %}

{% block title %}维修分析{% endblock %}

{% block extra_css %}
<style>
    .analytics-card {
        border: none;
        border-radius: 12px;
        box-shadow: 0 2px 8px rgba(0,0,0,0.1);
        margin-bottom: 20px;
    }
    .metric-box {
        text-align: center;
        padding: 20px;
        border-radius: 8px;
        margin-bottom: 15px;
    }
    .metric-number {
        font-size: 2rem;
        font-weight: bold;
        margin-bottom: 5px;
    }
    .metric-label {
        color: #6c757d;
        font-size: 0.9rem;
    }
    .chart-container {
        position: relative;
        height: 350px;
        margin: 20px 0;
    }
    .filter-section {
        background: #f8f9fa;
        border-radius: 8px;
        padding: 20px;
        margin-bottom: 20px;
    }
</style>
{% endblock %}

{% block content %}
<div class="container-fluid">
    <div class="row">
        <div class="col-12">
            <div class="d-flex justify-content-between align-items-center mb-4">
                <h2><i class="fas fa-tools me-2"></i>维修分析</h2>
                <div class="btn-group">
                    <a href="{% url 'assets:analytics_dashboard' %}" class="btn btn-outline-secondary">
                        <i class="fas fa-tachometer-alt me-1"></i>返回仪表板
                    </a>
                    <a href="{% url 'assets:export_analytics_data' %}?type=maintenance" class="btn btn-success">
                        <i class="fas fa-file-excel me-1"></i>导出数据
                    </a>
                </div>
            </div>
        </div>
    </div>

    <!-- 筛选区域 -->
    <div class="filter-section">
        <form method="get" class="row g-3">
            <div class="col-md-4">
                <label class="form-label">时间范围</label>
                <select name="time_range" class="form-select">
                    <option value="30">最近30天</option>
                    <option value="90">最近90天</option>
                    <option value="180">最近半年</option>
                    <option value="365">最近一年</option>
                </select>
            </div>
            <div class="col-md-4">
                <label class="form-label">维修状态</label>
                <select name="status" class="form-select">
                    <option value="">全部状态</option>
                    <option value="pending">待处理</option>
                    <option value="in_progress">进行中</option>
                    <option value="completed">已完成</option>
                    <option value="cancelled">已取消</option>
                </select>
            </div>
            <div class="col-md-4">
                <label class="form-label">&nbsp;</label>
                <button type="submit" class="btn btn-primary w-100">
                    <i class="fas fa-search me-1"></i>分析
                </button>
            </div>
        </form>
    </div>

    <!-- 核心指标 -->
    <div class="row mb-4">
        <div class="col-lg-3 col-md-6">
            <div class="metric-box" style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white;">
                <div class="metric-number">0</div>
                <div class="metric-label">维修总数</div>
            </div>
        </div>
        <div class="col-lg-3 col-md-6">
            <div class="metric-box" style="background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%); color: white;">
                <div class="metric-number">¥0</div>
                <div class="metric-label">维修总成本</div>
            </div>
        </div>
        <div class="col-lg-3 col-md-6">
            <div class="metric-box" style="background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%); color: white;">
                <div class="metric-number">¥0</div>
                <div class="metric-label">平均成本</div>
            </div>
        </div>
        <div class="col-lg-3 col-md-6">
            <div class="metric-box" style="background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%); color: white;">
                <div class="metric-number">0天</div>
                <div class="metric-label">平均周期</div>
            </div>
        </div>
    </div>

    <div class="row">
        <!-- 维修趋势图 -->
        <div class="col-lg-8">
            <div class="card analytics-card">
                <div class="card-header">
                    <h5 class="mb-0"><i class="fas fa-chart-line me-2"></i>维修趋势</h5>
                </div>
                <div class="card-body">
                    <div class="chart-container">
                        <canvas id="maintenanceTrendChart"></canvas>
                    </div>
                </div>
            </div>
        </div>

        <!-- 维修状态分布 -->
        <div class="col-lg-4">
            <div class="card analytics-card">
                <div class="card-header">
                    <h5 class="mb-0"><i class="fas fa-chart-pie me-2"></i>状态分布</h5>
                </div>
                <div class="card-body">
                    <div class="chart-container">
                        <canvas id="statusChart"></canvas>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="row">
        <!-- 维修成本分析 -->
        <div class="col-lg-6">
            <div class="card analytics-card">
                <div class="card-header">
                    <h5 class="mb-0"><i class="fas fa-dollar-sign me-2"></i>成本分析</h5>
                </div>
                <div class="card-body">
                    <div class="chart-container">
                        <canvas id="costChart"></canvas>
                    </div>
                </div>
            </div>
        </div>

        <!-- 维修类型分布 -->
        <div class="col-lg-6">
            <div class="card analytics-card">
                <div class="card-header">
                    <h5 class="mb-0"><i class="fas fa-cogs me-2"></i>维修类型</h5>
                </div>
                <div class="card-body">
                    <div class="chart-container">
                        <canvas id="typeChart"></canvas>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 详细统计表格 -->
    <div class="row">
        <div class="col-12">
            <div class="card analytics-card">
                <div class="card-header">
                    <h5 class="mb-0"><i class="fas fa-table me-2"></i>维修统计详情</h5>
                </div>
                <div class="card-body">
                    <div class="table-responsive">
                        <table class="table table-hover">
                            <thead class="table-light">
                                <tr>
                                    <th>资产类别</th>
                                    <th>维修次数</th>
                                    <th>总成本</th>
                                    <th>平均成本</th>
                                    <th>平均周期</th>
                                    <th>完成率</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td colspan="6" class="text-center text-muted">暂无数据</td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function() {
    initCharts();
    
    function initCharts() {
        // 维修趋势图
        const trendCtx = document.getElementById('maintenanceTrendChart').getContext('2d');
        new Chart(trendCtx, {
            type: 'line',
            data: {
                labels: ['1月', '2月', '3月', '4月', '5月', '6月'],
                datasets: [{
                    label: '维修数量',
                    data: [0, 0, 0, 0, 0, 0],
                    borderColor: 'rgb(75, 192, 192)',
                    backgroundColor: 'rgba(75, 192, 192, 0.2)',
                    tension: 0.1
                }, {
                    label: '维修成本',
                    data: [0, 0, 0, 0, 0, 0],
                    borderColor: 'rgb(255, 99, 132)',
                    backgroundColor: 'rgba(255, 99, 132, 0.2)',
                    tension: 0.1,
                    yAxisID: 'y1'
                }]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                scales: {
                    y: {
                        type: 'linear',
                        display: true,
                        position: 'left',
                    },
                    y1: {
                        type: 'linear',
                        display: true,
                        position: 'right',
                        grid: {
                            drawOnChartArea: false,
                        },
                    }
                }
            }
        });
        
        // 状态分布图
        const statusCtx = document.getElementById('statusChart').getContext('2d');
        new Chart(statusCtx, {
            type: 'doughnut',
            data: {
                labels: ['待处理', '进行中', '已完成', '已取消'],
                datasets: [{
                    data: [0, 0, 0, 0],
                    backgroundColor: ['#ffc107', '#17a2b8', '#28a745', '#dc3545']
                }]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                plugins: {
                    legend: {
                        position: 'bottom'
                    }
                }
            }
        });
        
        // 成本分析图
        const costCtx = document.getElementById('costChart').getContext('2d');
        new Chart(costCtx, {
            type: 'bar',
            data: {
                labels: ['0-100', '100-500', '500-1000', '1000-5000', '5000+'],
                datasets: [{
                    label: '维修次数',
                    data: [0, 0, 0, 0, 0],
                    backgroundColor: 'rgba(54, 162, 235, 0.8)'
                }]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                scales: {
                    y: {
                        beginAtZero: true
                    }
                }
            }
        });
        
        // 维修类型图
        const typeCtx = document.getElementById('typeChart').getContext('2d');
        new Chart(typeCtx, {
            type: 'polarArea',
            data: {
                labels: ['预防性维修', '故障维修', '改进性维修', '应急维修'],
                datasets: [{
                    data: [0, 0, 0, 0],
                    backgroundColor: [
                        'rgba(255, 99, 132, 0.8)',
                        'rgba(54, 162, 235, 0.8)',
                        'rgba(255, 205, 86, 0.8)',
                        'rgba(75, 192, 192, 0.8)'
                    ]
                }]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                plugins: {
                    legend: {
                        position: 'bottom'
                    }
                }
            }
        });
    }
});
</script>
{% endblock %}